import { useNavigate } from 'react-router-dom';
import { Image, Button, Input, Space, Toast } from 'antd-mobile';
import { LeftOutline, EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons';
import './login.css';
import { useState } from 'react';
import { isMobileNumber } from '@/utils/validate';

function Login() {
  const navigate = useNavigate();
  const [isMsgLogin, setIsMsgLogin] = useState(true);
  const [eyeVisible, setEyeVisible] = useState(false);
  const [phone, setPhone] = useState('');
  const [username, setUsername] = useState('');
  const [userPwd, setUserPwd] = useState('');
  // 短信登录
  const onMsgLogin = () => {
    if (phone.trim() === '') {
      Toast.show({
        content: '请输入手机号码',
        position: 'top',
      });
      return;
    }
    if (!isMobileNumber(phone)) {
      Toast.show({
        content: '请输入正确的手机号码',
        position: 'top',
      });
      return;
    }
    Toast.show({
      icon: 'success',
      content: '校验成功，功能待开发。。。',
      duration: 0,
    });
  };

  return (
    <div className="h-[100vh] bg-white">
      <div className="p-[16px_16px]">
        <LeftOutline className="text-[#000] text-[22px]" onClick={() => navigate('/home', { replace: true })} />
      </div>

      <Image className="w-[125px] mx-auto mt-[40px]" src="/src/assets/imgs/logo_cp.jpg" />
      <div className="text-[18px] text-center mt-[30px] text-[#666]">欢迎来到广西人才网【高仿】</div>

      {/* 短信登录 */}
      {isMsgLogin && (
        <div className="px-[20px] mt-[20px]">
          <div className="text-[#666] text-[13px] py-[5px]">首次登录会自动注册</div>
          <div className="input-animation">
            <Input
              className="h-[22px] box-content py-[18px] border-b border-solid"
              onlyShowClearWhenFocus={false}
              placeholder="请输入手机号码用于登录/注册"
              clearable
              value={phone}
              onChange={(v) => {
                setPhone(v);
              }}
            />
            <span className="input-animation-border block h-[1px] bg-color-primary mx-auto -mt-[1px]"></span>
          </div>
          <Button className="mt-[40px]" block color="primary" size="large" onClick={onMsgLogin}>
            登录/注册
          </Button>
          <Button
            fill="none"
            className="mt-[20px] ml-[50%] -translate-x-[50%]"
            color="primary"
            size="small"
            onClick={() => setIsMsgLogin(false)}
          >
            密码登录
          </Button>
        </div>
      )}

      {/* 密码登录 */}
      {!isMsgLogin && (
        <div className="px-[20px] mt-[20px]">
          <div className="input-animation">
            <Input
              className="h-[22px] box-content py-[18px] border-b border-solid"
              onlyShowClearWhenFocus={false}
              placeholder="请输入账号/手机/邮箱"
              clearable
              value={username}
              onChange={(v) => {
                setUsername(v);
              }}
            />
            <span className="input-animation-border block h-[1px] bg-color-primary mx-auto -mt-[1px]"></span>
          </div>
          <div className="input-animation relative">
            <Input
              type={eyeVisible ? 'text' : 'password'}
              className="h-[22px] box-content py-[18px] border-b border-solid"
              onlyShowClearWhenFocus={false}
              placeholder="请输入密码"
              clearable
              maxLength={30}
              value={userPwd}
              onChange={(v) => {
                setUserPwd(v);
              }}
            />
            {!eyeVisible ? (
              <EyeInvisibleOutline
                className="absolute top-[18px] right-[30px] text-[20px] text-[#999]"
                onClick={() => setEyeVisible(true)}
              />
            ) : (
              <EyeOutline
                className="absolute top-[18px] right-[30px] text-[20px] text-[#999]"
                onClick={() => setEyeVisible(false)}
              />
            )}
            <span className="input-animation-border block h-[1px] bg-color-primary mx-auto -mt-[1px]"></span>
          </div>
          <Button className="mt-[40px]" block color="primary" size="large">
            登录
          </Button>
          <Space className="w-full mt-[20px] justify-center">
            <Button fill="none" className="" color="primary" size="small" onClick={() => setIsMsgLogin(true)}>
              短信登录
            </Button>
            <Button
              fill="none"
              className=""
              color="primary"
              size="small"
              onClick={() => navigate('/login/reset-password')}
            >
              忘记密码
            </Button>
          </Space>
        </div>
      )}
    </div>
  );
}

export default Login;
